<template>
    <div style="height:100%;background:#F0F0F0">
        <yd-layout>   
            <yd-navbar slot="navbar" title="我的记录查询" style="height:1rem;font-size:.1rem">
            </yd-navbar>
            <div>
                <div style="height:.15rem"></div>
                <div style="height:.65rem;text-align:center;font-size:.35rem;color:#2DC3E8;font-weight:bold">
                    {{title}}
                </div>
                <yd-tab bg-color="#F5FFFA">
                    <yd-tab-panel label="借阅查询">
                        <yd-cell-group style="margin:0.2rem .14rem 0rem .14rem;"  @click.native="search">
                            <yd-cell-item>
                                <span slot="left" style="font-size:.25rem">查询时间：</span>
                                <span slot="left" style="color:red;font-size:.35rem"> {{ begtime }}&nbsp; </span>
                                <span slot="left" style="font-size:.25rem"> &nbsp;&nbsp;至&nbsp;&nbsp; </span>
                                <span slot="left" style="color:red;font-size:.35rem"> &nbsp;{{ endtime }} </span>
                                <span slot="right" ><yd-icon slot="icon" name="search" size=".5rem"   @click.native="search"></yd-icon></span>
                            </yd-cell-item>
                        </yd-cell-group>
                        <div style="height:.2rem"></div>
                        <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                                <yd-cell-item>
                                    <span slot="left" style="font-size:.25rem;font-weight:bold">借阅次数：</span>
                                    <span slot="right" style="font-size:.4rem;font-weight:bold">{{total}}</span>
                                    <span slot="right" style="font-size:.3rem;font-weight:bold">次</span>
                                </yd-cell-item>
                            </yd-cell-group>
                        <div style="height:.15rem"></div>
                        <yd-infinitescroll :callback="loadList" ref="infinitescrollData">
                            <yd-cell-group  slot="list">
                                <div v-for="item in list" :key="item.key" style="margin:.1rem .0rem 0.05rem 0rem;">
                                    <div class="div1"> 
                                        <yd-cell-group style="margin:0rem .14rem 0rem .14rem;" @click.native="queryDetail(item)">
                                            <yd-cell-item>
                                                <span slot="left">书名：</span>
                                                <span slot="right">
                                                    <div style="height:.8rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-if="item.tm.length>18">{{item.tm}}</div>
                                                    <div style="height:.35rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-else>{{item.tm}}</div>
                                                </span>
                                            </yd-cell-item>
                                            <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                            <yd-cell-item>
                                                <span slot="left">索书号：</span>
                                                <span slot="right" style="">{{item.ssh}}</span>
                                            </yd-cell-item>
                                            <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                            <yd-cell-item>
                                                <span slot="left">图书位置：</span>
                                                <span slot="right" style="">{{(item.ssh.substr(0,1)=='R'||item.ssh.substr(0,1)=='Q')?"生物医药书库":"人文社科书库"}}</span>
                                            </yd-cell-item>
                                            <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                            <yd-cell-item>
                                                <span slot="left">借阅时间：</span>
                                                <span slot="right" style="color:red">{{item.clsj.substr(0,10)}}</span>
                                            </yd-cell-item>
                                            <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                        </yd-cell-group>
                                    </div>
                                </div>
                            </yd-cell-group>
                            <span slot="doneTip"></span>
                            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
                        </yd-infinitescroll>
                    </yd-tab-panel>
                    <yd-tab-panel label="到馆次数">
                       <yd-cell-group style="margin:0.2rem .14rem 0rem .14rem;"  @click.native="search">
                            <yd-cell-item>
                                <span slot="left" style="font-size:.25rem">查询时间：</span>
                                <span slot="left" style="color:red;font-size:.35rem"> {{ begtime }}&nbsp; </span>
                                <span slot="left" style="font-size:.25rem"> &nbsp;&nbsp;至&nbsp;&nbsp; </span>
                                <span slot="left" style="color:red;font-size:.35rem"> &nbsp;{{ endtime }} </span>
                                <span slot="right" ><yd-icon slot="icon" name="search" size=".5rem"   @click.native="search"></yd-icon></span>
                            </yd-cell-item>
                        </yd-cell-group>
                        <div style="height:.2rem"></div>
                        <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                                <yd-cell-item>
                                    <span slot="left" style="font-size:.25rem;font-weight:bold">到馆天数：</span>
                                    <span slot="right" style="font-size:.4rem;font-weight:bold">{{totalday}}</span>
                                    <span slot="right" style="font-size:.3rem;font-weight:bold">天</span>
                                </yd-cell-item>
                                <yd-cell-item>
                                    <span slot="left" style="font-size:.25rem;font-weight:bold">进馆次数：</span>
                                    <span slot="right" style="font-size:.4rem;font-weight:bold">{{inn}}</span>
                                    <span slot="right" style="font-size:.3rem;font-weight:bold">天</span>
                                </yd-cell-item>
                                <yd-cell-item>
                                    <span slot="left" style="font-size:.25rem;font-weight:bold">出馆次数：</span>
                                    <span slot="right" style="font-size:.4rem;font-weight:bold">{{out}}</span>
                                    <span slot="right" style="font-size:.3rem;font-weight:bold">次</span>
                                </yd-cell-item>
                            </yd-cell-group>
                        <div style="height:.1rem"></div>     
                    </yd-tab-panel>
                    <yd-tab-panel label="借阅证明">
                        <yd-cell-group style="margin:0.2rem .14rem 0rem .14rem;"  @click.native="search">
                            <yd-cell-item>
                                <span slot="left" style="font-size:.25rem">查询时间：</span>
                                <span slot="left" style="color:red;font-size:.35rem"> {{ begtime }}&nbsp; </span>
                                <span slot="left" style="font-size:.25rem"> &nbsp;&nbsp;至&nbsp;&nbsp; </span>
                                <span slot="left" style="color:red;font-size:.35rem"> &nbsp;{{ endtime }} </span>
                                <span slot="right" ><yd-icon slot="icon" name="search" size=".5rem"   @click.native="search"></yd-icon></span>
                            </yd-cell-item>
                        </yd-cell-group>
                        <div style="height:.2rem"></div>
                        <div class="row" id="pdfDom" style="margin:0rem .14rem 0rem .14rem;background-color:#fff;
                            background-image: url(../../../static/image/zm3.jpg);background-repeat: no-repeat;
                            background-size: 100% 100%;">
                            <div style="text-align:center;font-size:.3rem;font-weight:bold;padding-top:1.25rem">图书馆读者借阅证明</div><br />
                            <div style="float:left;font-size:.2rem;margin-bottom:0rem;margin-left:.3rem;">
                                <div style="margin-left:.4rem;text-decoration:underline;float:left;padding-top:.1rem;font-weight:bold">&nbsp;{{name}}&nbsp;</div>
                                <div style="float:left;padding-top:.1rem">，证件号为</div>
                                <div style="text-decoration:underline;float:left;padding-top:.1rem;font-weight:bold">&nbsp;{{dztm}}&nbsp;</div>
                                <div style="float:left;padding-top:.1rem">，自</div>
                                <div style="text-decoration:underline;float:left;padding-top:.1rem;font-weight:bold">&nbsp;{{begtime}}&nbsp;</div>
                                <div style="float:left;padding-top:.1rem">至</div>
                                <div style="text-decoration:underline;float:left;padding-top:.1rem;font-weight:bold">&nbsp;{{endtime}}&nbsp;</div>
                            </div>
                            <div style="margin-left:.3rem;float:left;font-size:.2rem;margin-bottom:.2rem;">
                                <div style="float:left;padding-top:.15rem;">期间，</div>
                                <div style="float:left;padding-top:.15rem">共进入</div>
                                <div style="float:left;padding-top:.15rem">图书馆</div>
                                <div style="text-decoration:underline;float:left;padding-top:.15rem;font-weight:bold">&nbsp;&nbsp;{{totalday}}&nbsp;&nbsp;</div>
                                <div style="float:left;padding-top:.15rem">天，借阅图书</div>
                                <div style="text-decoration:underline;float:left;padding-top:.15rem;font-weight:bold">&nbsp;&nbsp;{{total}}&nbsp;&nbsp;</div>
                                <div style="float:left;padding-top:.15rem">册。</div>
                            </div>
                            <br /><br />
                            <div style="font-size:.2rem;margin-bottom:.2rem;">
                                <div style="margin-left:.65rem;margin-top:.5rem;font-size:.2rem;padding-top:.4rem">特此证明！(此证明须经图书馆盖章确认)</div>
                            </div>
                            <br />
                            <table>
                                <thead>
                                    <tr>
                                        <th style="width:45%">书名</th>
                                        <th style="width:27%">分类号</th>
                                        <th style="width:28%">借书时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for ="item in list" :key="item.key">
                                        <td style="text-align:left">{{item.tm}}</td>
                                        <td>{{item.ssh}}</td>
                                        <td>{{item.clsj.substring(0,10)}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <br />
                            <div>
                                <div style="text-align:right;margin-right:.5rem;font-size:.2rem">图书馆读者服务部</div>
                            </div>
                            <br />
                            <div>
                                <div style="text-align:right;margin-right:.5rem;font-size:.2rem;padding-bottom:1.5rem;">&nbsp;{{nian}}&nbsp;年&nbsp;{{yue}}&nbsp;月&nbsp;{{ri}}&nbsp;日</div>
                            </div>
                        </div>
                        <!-- <div style="margin:0rem .14rem 0rem .14rem;">
                            <yd-button bgcolor="#2DC3E8" size="large" style="font-size:.5rem;font-weight:bold;color:white" @click.native="getPdf()">导出PDF</yd-button>
                        </div> -->
                    </yd-tab-panel>
                </yd-tab>
            </div>
            <yd-tabbar slot="tabbar">
                <yd-tabbar-item title="我要找书" link="#" active @click.native="scanCode()">
                    <yd-icon name="search" slot="icon"></yd-icon>
                </yd-tabbar-item>
            </yd-tabbar>  
            <template>
            <yd-popup v-model="isSearch" position="right" width="100%" :close-on-masker="false" :masker-opacity=".8">
                <yd-navbar title="请选择时间段查询">
                    <router-link to="" @click.native="closeSeach" slot="left">
                        <yd-navbar-back-icon></yd-navbar-back-icon>
                    </router-link>
                </yd-navbar>
                <div style="margin: .0rem .05rem .0rem .05rem">
                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                    <yd-cell-item arrow>
                        <span slot="left">开始日期：</span>
                        <yd-datetime v-model="begtime" ref="begtime" :yearFormat="yearFormat" :month-format="monthFormat" :day-format="dayFormat" type="date" slot="right"></yd-datetime>
                    </yd-cell-item>
                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                    <yd-cell-item arrow>
                        <span slot="left">结束日期：</span>
                        <yd-datetime v-model="endtime" ref="endtime" :yearFormat="yearFormat" :month-format="monthFormat" :day-format="dayFormat" type="date" slot="right"></yd-datetime>
                    </yd-cell-item>
                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                    <div style="text-align: center;margin: .0rem .1rem .0rem .1rem">
                        <yd-button  type="primary" size="large"  @click.native="recordsSearch">查 询</yd-button>
                    </div>
                </div>
                </yd-popup>
            </template>
        </yd-layout> 
        <div>
            <yd-popup v-model="showDetail" position="right" width="100%" height="100%" :masker-opacity="1" :close-on-masker="false">
                <yd-layout title="借阅明细" link="#" @click.native="showDetail = false">
                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                    <div style="height:.15rem"></div>
                    <div class="div1"> 
                        <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                            <yd-cell-item>
                                <span slot="left">书名：</span>
                                <span slot="right">
                                    <div style="height:.8rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-if="sm.length>18">{{sm}}</div>
                                    <div style="height:.35rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-else>{{sm}}</div>
                                </span>
                            </yd-cell-item>
                        </yd-cell-group>
                    </div>
                    <div v-for="item in record" :key="item.key" style="margin:.1rem .0rem 0.05rem 0rem;">
                        <div class="div1"> 
                            <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                                <yd-cell-item>
                                    <span slot="left">{{item.bz}}：</span>
                                    <span slot="right" style="color:#4169E1;font-size:.3rem">{{item.clsj}}</span>
                                </yd-cell-item>
                            </yd-cell-group>
                            <yd-cell-group style="margin:0rem .14rem 0rem .14rem;" v-show="item.pfk != null">
                                <yd-cell-item>
                                    <span slot="left">超期天数：</span>
                                    <span slot="right" style="font-size:.3rem">{{item.cqts}}</span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <yd-cell-item>
                                    <span slot="left">赔罚款额：</span>
                                    <span slot="right" style="color:red;font-size:.35rem">{{item.pfk}}</span>
                                </yd-cell-item>
                            </yd-cell-group>
                        </div>
                    </div>
                </yd-layout>
            </yd-popup>
        </div>          
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
Vue.component(Layout.name, Layout);
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
import {NavBar, NavBarBackIcon, NavBarNextIcon} from 'vue-ydui/dist/lib.rem/navbar';
Vue.component(NavBar.name, NavBar);
Vue.component(NavBarBackIcon.name, NavBarBackIcon);
Vue.component(NavBarNextIcon.name, NavBarNextIcon);
import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);
import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);
import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
Vue.component(InfiniteScroll.name, InfiniteScroll);
import {Popup} from 'vue-ydui/dist/lib.rem/popup';
Vue.component(Popup.name, Popup);
import {DateTime} from 'vue-ydui/dist/lib.rem/datetime';
Vue.component(DateTime.name, DateTime);
import {Tab, TabPanel} from 'vue-ydui/dist/lib.rem/tab';
Vue.component(Tab.name, Tab);
Vue.component(TabPanel.name, TabPanel);
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
    confirm: Confirm,
    alert: Alert,
    toast: Toast,
    notify: Notify,
    loading: Loading
    
};
export default {
    data() {
        return {
            dztm:window.localStorage.getItem("dztm"),
            name:window.localStorage.getItem("name"),
            page: 1,
            pageSize: 10,
            total: 0 ,
            pageAll: 1,
            list:[],
            record:[],
            showDetail: false,
            isSearch: false,
            begtime:'2018-09-01',
            endtime:'',
            yearFormat: '<span style="color:#F00;">{value}<i style="font-size: 12px;margin-left: 1px;">年</i></span>',
            monthFormat: '<span style="color:#0BB20C;">{value}<i style="font-size: 12px;margin-left: 1px;">月</i></span>',
            dayFormat: '<span style="color:#FFB400;">{value}<i style="font-size: 12px;margin-left: 1px;">日</i></span>',
            sm:'',  //书名
            totalday: 0,    //到馆天数
            inn: 0,         //进馆次数
            out: 0,         //出馆次数
            htmlTitle: '图书馆读者借阅证明',
            title:'',
            ri:'',
            yue:'',
            nian:''
        }
    },
    created(){
        this.getUser();
        this.getMonFirDay();
        this.formatDate();
        this.mockTableData();
            //this.title= this.name + "（" + window.localStorage.getItem("dztm") + "）记录查询"       
    },
    methods:{
        mockTableData(){
            this.list = [];
            //获取用户的借书记录
            let that_ = this;
            axios.get('/api/libiary/queryRecord',{                 
                params:{
                    pageNum:1,
                    num:10,
                    dztm: that_.dztm,
                    begtime:that_.begtime,
                    endtime:that_.endtime,
                },
                withCredentials: true        
            })
            .then(function (res) { 
                console.log(res.data.data)
                let temp = res.data.data
                that_.total = temp.total;
                that_.totalday = temp.day;
                that_.inn = temp.inn;
                that_.out = temp.out;
                that_.pageAll = temp.record;
                if(temp.total > 0){
                    console.log(temp.record)
                    that_.list = temp.record
                }                                
            })
            .catch(function (error) {
                console.log(error);
                that_.$dialog.toast({
                    mes: "服务器繁忙，请稍后再试！",
                    timeout: 2500,
                    icon: 'error',
                }); 
            }); 
        },
        loadList(){
            let that_ = this;
            this.$dialog.loading.open('正在加载数据,请稍后');
            setTimeout(() => {
                this.$dialog.loading.close();
            }, 20000);
            axios.get("/api/libiary/queryRecords",{                  
                params:{
                    pageNum: that_.page+1,
                    num: that_.pageSize,
                    begtime:that_.begtime,
                    endtime:that_.endtime,  
                    dztm: that_.dztm,                  
                }          
            }).then(function(res){
                const _list = res.data.data.record;
                that_.list = [...that_.list, ..._list];
                if (_list.length < that_.pageSize || that_.page == res.data.data.record) {
                    that_.$refs.infinitescrollData.$emit('ydui.infinitescroll.loadedDone');
                    that_.$dialog.loading.close();
                    return;
                }
                that_.$refs.infinitescrollData.$emit('ydui.infinitescroll.finishLoad');
                that_.page++;
                that_.$dialog.loading.close();
            }).catch(function(error){
                console.log(error)
                that_.$dialog.toast({
                    mes: '系统忙碌，请稍后再试',
                    timeout: 1500,
                    icon: 'error',
                });
                that_.$dialog.loading.close();
            })    
        },
        //查询借阅明细
        queryDetail(data){
            this.sm = data.tm
            console.log(data)
            var qs = require('querystring');
            let that_ = this;
            axios.post(          
                "/api/libiary/queryRecordDetail",
                qs.stringify({
                    dztm: data.dztm,
                    zjm: data.zjm,
                    begtime: that_.begtime,
                    endtime: that_.endtime,       
                })
            ).then(function(res){
                console.log(res)
                
                that_.record = res.data.data
                that_.showDetail = true;
            }).catch(function (error) {
                console.log(error);
                that_.$dialog.toast({
                    mes: "服务器繁忙，请稍后再试！",
                    timeout: 2500,
                    icon: 'error',
                }); 
            });                 
        },
        openCustomConfrim() {
            this.$dialog.confirm({
                title: '温馨提示',
                mes: '您的微信尚未绑定校园卡，请点击绑定按钮进行绑定',
                opts: [
                    {
                        txt: '绑定',
                        color: true,
                        callback: () => {
                            this.$router.push({path: '/bdkh'});
                        }
                    }
                ]
            });
        },
        scanCode(){
            this.$router.push({path: '/scanCode'});
        },
        recordsSearch(){
            this.$refs.begtime.close();
            this.$refs.endtime.close();
            if(window.localStorage.getItem("dztm") == null|| window.localStorage.getItem("dztm") == ''){
                return
            }
            if(this.begtime > this.endtime){
                this.$dialog.toast({
                    mes: '结束日期不能小于开始日期',
                    timeout: 2500,
                    icon: 'error'
                });
                return
            }
            this.isSearch = false
            this.$refs.infinitescrollData.$emit('ydui.infinitescroll.reInit');
            this.mockTableData();
            
        },
        search(){
            this.isSearch=true;
        },
        closeSeach(){
            this.isSearch = false;
            this.$refs.begtime.close();
            this.$refs.endtime.close();
        },
        getMonFirDay(){
            let date = new Date();
            let y=date.getFullYear()-1;
            let m=date.getMonth()+1;
            m=m<10?"0"+m:m;
            this.begtime =  y+"-09-01";
            this.ri = date.getDate();
            this.yue = m;
            this.nian = date.getFullYear();
        },
        formatDate(){
            var date = new Date()
            this.endtime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
        },
        getUser(){
            let that_ = this
            axios.get('/api/libiary/code',{
                params:{                  
                  appId:appId,
                  code:code,     
                },
                withCredentials:true
            })
            .then(function (res) {    
                console.log("===================")  
                console.log(res) 
                if(res.data.data.dztm == null || res.data.data.dztm== ''){
                    that_.openCustomConfrim();
                }else{
                    console.log("aaaaa")
                    window.localStorage.setItem("dztm",res.data.data.dztm)   
                    window.localStorage.setItem("name",res.data.data.name)       
                    that_.dztm =  res.data.data.dztm
                    that_.name =  res.data.data.name
                    that_.getMonFirDay();
                    that_.formatDate();
                    that_.mockTableData();
                    that_.title= res.data.data.name + "（" + res.data.data.dztm + "）记录查询"
                }                    
            })
            .catch(function (error) {
                console.log(error);
            }); 
        }
    }
}

</script>

<style>
.yd-cell-right {
    min-height:.7rem!important;
}
.div1{
    width:97%;
    height:100%;
    margin:2px auto;
    text-align: center;
    background: white;
    border:1px solid #BFB8C0;
    box-shadow: darkgrey 10px 10px 30px 5px;
}
table{
    border-collapse: collapse; 
    border:2px solid black;
    width:88%;
    margin: 0 0 0 .45rem;
/*表格的边框合并为一个单一的边框*/
}
tr th{ 
    border:1px solid black; 
    text-align:center;
    height:.4rem;
    font-size: .25rem;
    font-weight:bold
}
tr td { 
    border:1px solid black; 
    text-align:center;
}
</style>
    